<template>
    <div>
        <div class="flex_al_center pt-4 pb-4">
            <v-btn color="primary" @click="cropperShow = true" class="mr-4">裁剪图片</v-btn>
            <img style="width: 100px;" :src="path" alt="">
        </div>


        <div v-if="cropperShow">
            <vue-cropper-photo v-model="cropperShow" @setImg="setImg"></vue-cropper-photo>
        </div>

        <div class="code_box">
<pre v-highlight>
<code>
    &lt;button @click="cropperShow = true" type="button"&gt;更换其他头像&lt;/button&gt;
    &lt;vue-cropper-tx v-model="cropperShow" @setImg="setImg" &gt;&lt;/vue-cropper-tx&gt;

    setImg (data) {
        this.cropperShow = false

        let formData = new FormData()
        formData.append('avatarFile', data)

        var reader = new FileReader();
        reader.readAsDataURL(data);
        this.file = data
        reader.onload = (e) => {
            this.path = reader.result
        }

        this.$api({
            api: 'api-user-updateAvatar',
            data: formData,
            type: 'instance'
        }).then(res => {
            this.$store.commit('setUserItem', res)
            this.$store.commit('setAlert', {
                show: true,
                massage: '修改成功',
                type: 'success',
                time: 2,
            })
        })
    }

</code>
</pre>
        </div>

    </div>


</template>

<script>
    export default {
        name: "v-tip-cropper",
        data () {
            return {
                path: null,
                file: null,
                cropperShow: false
            }
        },
        methods: {
            setImg (data) {
                this.cropperShow = false
                var reader = new FileReader();
                reader.readAsDataURL(data);
                reader.onload = (e) => {
                    this.path = reader.result
                }
            },
        }
    }
</script>

<style scoped src="../style.css"></style>
